<template>
	<ls-page title="我的推广">
		<view class="continar">
			<view class="top-box">
				<view class="item-box">
					<view class="number">{{ headerSumary.personCount || 0 }}</view>
					<view class="text">推广人数</view>
				</view>
				<view class="item-box">
					<view class="number">￥{{ headerSumary.totalcomAmt || 0 }}</view>
					<view class="text">累计收益</view>
				</view>
				<view class="details" @click="allOrder">查看明细 ></view>
			</view>
			<view class="cet-box">
				<view class="item-box">
					<view class="number">{{ headerSumary.todayOrderCount || 0 }}</view>
					<view class="text">今日消费(笔)</view>
				</view>
				<view class="item-box">
					<view class="number">￥{{ headerSumary.todayAmt || 0 }}</view>
					<view class="text">今日预计收益(元)</view>
				</view>
			</view>
			<view class="bot-box">
				<view class="tgr-title">推广人员列表</view>
				<view class="table-continar">
					<view class="header-box">
						<view class="header-item" style="width: 30%;">人员</view>
						<view class="header-item" style="width:30%;">电话</view>
						<view class="header-item" style="width: 17%;">消费次数</view>
						<view class="header-item" style="width: 23%;">计佣总金额</view>
					</view>
					<view class="content-box" v-for="(v, k) in sumaryList" :key="k">
						<view class="val-item" style="width: 30%;">{{ v.name }}</view>
						<view class="val-item" style="width:30%;">{{ v.mobile }}</view>
						<view class="val-item" style="width: 17%;">{{ v.ordercount }}次</view>
						<view class="val-item" style="width: 23%;">￥{{ v.totalAmt }}</view>
					</view>
				</view>
			</view>
		</view>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	import { ref, onMounted, onUnmounted } from 'vue'
	import { _FormatNumber } from '@/until/tools.js'

	const cardInfo = ref(uni.getStorageSync('storeCard')) //门店卡信息
	const headerSumary = ref({
		personCount: 0,
		totalcomAmt: 0,
		todayOrderCount: 0,
		todayAmt: 0
	})

	const sumaryList = ref([])

	const oninit = () => {
		HFiveMemberAppObjProcess({
			functionName: "GetComPersonAllSharing_H5",
			contentData: {
				cardNo: cardInfo.value.code
			}
		}).then((res) => {
			console.log(res);
			headerSumary.value = res.headerSumary
			sumaryList.value = res.footerSummary
		});
		
	}

	oninit()

	const allOrder = () => {
		uni.navigateTo({
			url: '/subpkg/view/myPartner/allOrder/allOrder',
		})
	}
</script>

<style lang="scss">
	.continar {
		padding: 24rpx;

		.top-box {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			height: 214rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.item-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 70rpx 0 96rpx;
				height: 134rpx;
				border-bottom: 1px solid #E6E6E6;

				.number {
					font-weight: bold;
					font-size: 40rpx;
					color: #212121;
				}

				.text {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					white-space: nowrap;
				}
			}

			.details {
				position: absolute;
				bottom: 26rpx;
				right: 24rpx;
				display: flex;
				justify-content: flex-end;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.cet-box {
			margin-top: 20rpx;
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.item-box {
				padding: 24rpx 80rpx 0 66rpx;
				height: 134rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.number {
					font-weight: bold;
					font-size: 40rpx;
					color: #212121;
				}

				.text {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					white-space: nowrap;
				}
			}
		}

		.bot-box {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 24rpx 20rpx 24rpx;

			.tgr-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
			}

			.table-continar {
				margin-top: 20rpx;

				.header-box {
					display: flex;
					//  justify-content: space-between;
					border-bottom: 1px solid #E6E6E6;

					.header-item {
						text-align: center;
						height: 85rpx;
						line-height: 85rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #999999;
					}
				}

				.content-box {
					display: flex;

					.val-item {
						text-align: center;
						height: 99rpx;
						line-height: 99rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #212121;
						overflow: hidden;
						white-space: nowrap;
					}


				}



			}





		}



	}
</style>